<template>
  <el-drawer
    :visible.sync="show"
    :show-close="false"
    :wrapper-closable="false"
    :with-header="false"
    custom-class="drawer-body"
    size="80%">
    <el-button class="drawer-close" type="primary" @click="closeDetail">关闭</el-button>
    <el-scrollbar style="height: 100%;width: 100%;">
      <div class="drawer-container detail-container">
        <div>
          <el-steps :active="orderStatus" finish-status="success" align-center>
            <el-step :description="order.create_time" title="提交订单" />
            <el-step :description="order.payment_time" title="支付订单" />
            <el-step :description="order.delivery_time" title="平台发货" />
            <el-step :description="order.receive_time" title="确认收货" />
            <el-step :description="order.complete_time" title="交易完成" />
          </el-steps>
        </div>
        <el-card shadow="never" style="margin-top: 15px">
          <div class="page-header">
            <i class="el-icon-warning color-danger" style="margin-left: 20px" />
            <span class="color-danger">当前订单状态：{{ sysDictTranslate.order_status[order.status] }}</span>
            <div v-show="order.status===0" class="operate-button-container">
              <el-button size="mini">修改收货人信息</el-button>
              <el-button size="mini">修改费用信息</el-button>
              <el-button size="mini">关闭订单</el-button>
              <el-button size="mini">备注订单</el-button>
            </div>
            <div v-show="order.status===1" class="operate-button-container">
              <el-button size="mini">修改收货人信息</el-button>
              <el-button size="mini">取消订单</el-button>
              <el-button size="mini">备注订单</el-button>
            </div>
            <div v-show="order.status===2||order.status===3" class="operate-button-container">
              <el-button size="mini">订单跟踪</el-button>
              <el-button size="mini">备注订单</el-button>
            </div>
            <div v-show="order.status===4" class="operate-button-container">
              <el-button size="mini">删除订单</el-button>
              <el-button size="mini">备注订单</el-button>
            </div>
          </div>
          <div style="margin-top: 20px">
            <i class="el-icon-s-flag" />
            <span class="font-small">基本信息</span>
          </div>
          <div class="table-layout">
            <el-row>
              <el-col :span="4" class="table-cell-title">订单编号</el-col>
              <el-col :span="4" class="table-cell-title">下单企业</el-col>
              <el-col :span="4" class="table-cell-title">支付方式</el-col>
              <el-col :span="4" class="table-cell-title">订单来源</el-col>
              <el-col :span="4" class="table-cell-title">物流公司</el-col>
              <el-col :span="4" class="table-cell-title">物流单号</el-col>
            </el-row>
            <el-row>
              <el-col :span="4" class="table-cell">{{ order.sn }}</el-col>
              <el-col :span="4" class="table-cell">{{ order.buy_company_title }}</el-col>
              <el-col :span="4" class="table-cell">{{ sysDictTranslate.pay_type[order.pay_type] || '-' }}</el-col>
              <el-col :span="4" class="table-cell">{{ sysDictTranslate.source_type[order.pay_type] || '-' }}</el-col>
              <el-col :span="4" class="table-cell">{{ order.delivery_company || '-' }}</el-col>
              <el-col :span="4" class="table-cell">{{ order.delivery_sn || '-' }}</el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px">
            <i class="el-icon-s-flag" />
            <span class="font-small">收货人信息</span>
          </div>
          <div class="table-layout">
            <el-row>
              <el-col :span="6" class="table-cell-title">收货人</el-col>
              <el-col :span="6" class="table-cell-title">手机号码</el-col>
              <el-col :span="6" class="table-cell-title">邮政编码</el-col>
              <el-col :span="6" class="table-cell-title">收货地址</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="table-cell">{{ order.receiver_name }}</el-col>
              <el-col :span="6" class="table-cell">{{ order.receiver_phone }}</el-col>
              <el-col :span="6" class="table-cell">{{ order.receiver_post_code }}</el-col>
              <el-col :span="6" class="table-cell">{{ order.receiver_detail_address }}</el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px">
            <i class="el-icon-s-flag" />
            <span class="font-small">商品信息</span>
          </div>

          <msg-list
            :btnshow="false"
            :pageshow="false"
            :idshow="false"
            :checked="false"
            :table-data="orderItemsShow"
            :title="productTitle"
            getimg />

          <div style="float: right;margin: 20px">
            合计：<span class="color-danger">￥{{ orderItemsSubtotal }}</span>
          </div>
          <div style="margin-top: 60px">
            <i class="el-icon-s-flag" />
            <span class="font-small">费用信息</span>
          </div>
          <div class="table-layout">
            <el-row>
              <el-col :span="6" class="table-cell-title">商品合计</el-col>
              <el-col :span="6" class="table-cell-title">运费</el-col>
              <el-col :span="6" class="table-cell-title">订单总金额</el-col>
              <el-col :span="6" class="table-cell-title">应付款金额</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="table-cell">￥{{ orderItemsSubtotal }}</el-col>
              <el-col :span="6" class="table-cell">￥{{ order.freight_amount || '-' }}</el-col>
              <el-col :span="6" class="table-cell">￥{{ order.total_amount }}</el-col>
              <el-col :span="6" class="table-cell">￥{{ order.pay_amount }}</el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px">
            <i class="el-icon-s-flag" />
            <span class="font-small">操作信息</span>
          </div>

          <msg-list
            :btnshow="false"
            :pageshow="false"
            :idshow="false"
            :checked="false"
            :table-data="orderHistoryShow"
            :title="historyTitle"
          />

        </el-card>
      </div>
    </el-scrollbar>
  </el-drawer>
</template>

<script>

import { mapGetters } from 'vuex'
import config from '@/common/config'

import MsgList from '@/components/public/msgList'

export default {
  name: 'OrderDetails',
  components: {
    MsgList
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    order: {
      type: Object,
      default: () => {}
    },
    orderItems: {
      type: Array,
      default: () => []
    },
    orderHistory: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      productTitle: [
        {
          prop: 'product_title',
          label: '商品名'
        },
        {
          prop: 'product_sn',
          label: '货号'
        },
        {
          prop: 'product_quantity',
          label: '购买数量'
        },
        {
          prop: 'product_price',
          label: '商品金额'
        },
        {
          prop: 'subtotal',
          label: '小计'
        }
      ],
      historyTitle: [
        {
          prop: 'operate_user_username',
          label: '操作人名'
        },
        {
          prop: 'create_time',
          label: '操作时间'
        },
        {
          prop: 'orderStatus',
          label: '订单状态'
        },
        {
          prop: 'note',
          label: '备注'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['sysDict', 'sysDictTranslate']),
    orderStatus() {
      const { status, confirm_status } = this.order
      let active = 1
      if (status === 1) {
        active = 2
      } else if (status === 2) {
        // 判断是否已收货
        active = confirm_status ? 4 : 3
      } else if (status === 3) {
        active = 5
      }

      return active
    },
    orderItemsShow() {
      return this.orderItems.map(item => {
        item.img = config.imgURI + item.product_pic
        item.subtotal = item.product_quantity * item.product_price
        return item
      })
    },
    orderItemsSubtotal() {
      return this.orderItemsShow.reduce((a, b) => {
        return a + b.subtotal
      }, 0)
    },
    orderHistoryShow() {
      return this.orderHistory.map(item => {
        item.orderStatus = this.sysDictTranslate.order_status[item.order_status]
        return item
      })
    }
  },
  methods: {
    closeDetail() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style scoped>

</style>
